<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link th:replace="fragments/dependency :: list-css">

<title>优铺Admin</title>
</head>

<body class="nav-md">
	<div class="container body">
		<div class="main_container">
			<!-- Left Menu -->
			<div th:replace="fragments/leftMenu :: leftMenu"></div>

			<!-- top navigation -->
			<div th:replace="fragments/header :: header"></div>

			<!-- page content -->
			<div class="right_col" role="main">


				<div class="ln_solid"></div>
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>商铺信息</h2>
							<ul class="nav navbar-right panel_toolbox">
								<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
							</ul>
							<div class="clearfix"></div>
						</div>
						<!-- 按钮区域 -->

						<!-- 搜索区域 -->
						<div class="x_content">
							<div class="form-inline">
								<div class="form-group">
									<label for="ex4">商铺来源：</label>
									<select id="createTypeOptions" name="createType" class="form-control">
										<option value="">请选择</option>
										<option th:each="createType : ${T(com.up.upzl.biz.domain.Shop.CreateType).values()}" th:text="${createType}"></option>
									</select>
								</div>
								<div class="form-group hide">
									<label for="ex4">城市：</label> <select id="cityOptions" name="city" class="form-control"></select>
								</div>
								<div class="form-group">
									<label for="ex4">区域：</label> <select name="area" id="areaOptions" class="form-control">
									</select>
								</div>
								<div class="form-group">
									<label for="ex4">商圈：</label> 
									<select name="businessArea" id="businessAreaOptions" class="form-control">
										<option value="">请选择</option>
									</select>
								</div>
								<div class="form-group">
									<label for="ex4">租售类型：</label> <select id="rentTypeOptions" name="rentType" class="form-control">
										<option value="">请选择</option>
										<option value="0">商铺出租</option>
										<option value="1">商铺转租/生意转让</option>
		
									</select>
								</div>
								<div class="form-group">
									<label for="ex4">商铺类型：</label> <select id="shopTypeOptions" name="shopType" class="form-control">
										<option value="">请选择</option>
										<option th:each="shopType : ${T(com.up.upzl.biz.domain.Shop.Type).values()}" th:text="${shopType}"></option>
									</select>
								</div>
								<!--  <div class="form-group">
									<label for="ex4">经营业态：</label> 
									<select name="parentManageType" id="parentManageTypeOptions" class="form-control">
										<option value="">请选择</option>
									</select>
									<select name="sonManageType" id="sonManageTypeOptions" class="form-control">
										<option value="">请选择</option>
									</select>
								</div>  -->
								<div class="form-group">
									<label for="ex4"> 外网开关：</label> <select class="form-control" id="onlineStatusOptions" name="onlineStatus">
										<option value="">请选择</option>
										<option value="1">上架</option>
										<option value="0">下架</option>
									</select>
								</div>
								<div class="form-group">
									<label for="ex4">商铺名称：</label> <input type="email" id="ex4" name="name" th:value="${param.name}" class="form-control" placeholder=" ">
								</div>
								<div class="form-group">
									<label for="ex4">商铺编号：</label> <input type="email" id="ex4" name="shopNumber" th:value="${param.shopNumber}" class="form-control" placeholder=" ">
								</div>
								<div class="form-group">
									<label for="ex4">录入时间</label>
									<div class='input-group date' id='myDatepicker0'>
										<input type='text' class="form-control" name="beginTime" th:value="${#strings.isEmpty(param.beginTime)}?'': ${param.beginTime[0]}" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
									<label for="ex4">-</label>
									<div class='input-group date' id='myDatepicker1'>
										<input type='text' class="form-control" name="endTime" th:value="${#strings.isEmpty(param.endTime)}?'': ${param.endTime[0]}" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
							</div>
						</div>
						<div class="x_title">
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<button type="button" class="btn btn-round btn-primary hide" name="add" permission-rel="/shop/addPage">新增</button>
							<button type="button" class="btn btn-round btn-success hide" name="query" permission-rel="/shop/list">查询</button>
                            <button type="button" class="btn btn-round btn-success" id="restQuery" >重置</button>
						</div>
						<div class="x_title">
							<div class="clearfix"></div>
						</div>
						<div class="text-right">
							<span class="label label-info" th:text="'总数：'+${pageList?.totalElements}"></span>
							<span class="label label-info" th:text="'上架：'+${openNumber}"></span>
							<span class="label label-info" th:text="'下架：'+${closeNumber}"></span>
						</div>
						<div class="x_content">
							<div class="table-responsive">
								<table class="table table-striped jambo_table bulk_action">
									<thead>
										<tr class="headings">
										    <th class="column-title">序号</th>
											<th class="column-title">商铺编号</th>
											<th class="column-title">商铺来源</th>
											<th class="column-title">商铺名称</th>
											<th class="column-title">区域</th>
											<th class="column-title">商圈</th>
											<th class="column-title">租售类型</th>
											<th class="column-title">商铺类型</th>
											<th class="column-title">当前经营(二级)</th>
											<th class="column-title">月租金</th>
											<th class="column-title">转让费</th>
											<th class="column-title">录入时间</th>
											<th class="column-title">核实人</th>
											<th class="column-title">外网开关</th>
											<th class="column-title no-link last"><span class="nobr">操作</span></th>
										</tr>
									</thead>
									<tbody>
										<tr class="even pointer" th:each="entity : ${pageList}">
										    <td th:text="${entityStat.count}"></td>
											<td th:text="${entity.shopNumber}"></td>
											<td th:text="${entity.createType}"></td>
											<td th:text="${entity.name}"></td>
											<td th:text="${entity.area == null ? '' : entity.area.name}"></td>
											<td th:text="${entity.businessArea== null ? '' : entity.businessArea.name}"></td>
											<td th:text="${entity.rentType == 1 ? '商铺转租/生意转让' : '商铺出租'}"></td>
											<td th:text="${entity.type}"></td>
											<td th:text="${entity.sonManageType?.name}"></td>
											<td th:text="${entity.monthlyRentText == null ? '暂无' : entity.monthlyRentText}"></td>
											<td th:text="${entity.transferFeeText == null ? '暂无' : entity.transferFeeText}"></td>
											<td th:text="${#dates.format(entity.createTime, 'yyyy/MM/dd HH:mm:ss')}"></td>
											<td th:text="${entity.verificationAccount == null ? '' : entity.verificationAccount?.name}"></td>
											<td th:id="'onlineStatus' + ${entity.id}">
												<a href="javascript:;" th:onclick="'onlineShop(' + ${entity.id} + ')'" class="btn btn-info btn-xs online" permission-rel="/shop/" th:style="${entity.onlineStatus != null and entity.onlineStatus == 1} ? 'display: none;' : ''"><i class="fa fa-pencil"></i>上架</a>
												<a href="javascript:;" th:onclick="'offlineShop(' + ${entity.id} + ')'" class="btn btn-info btn-xs offline" permission-rel="/shop/" th:style="${entity.onlineStatus == null or entity.onlineStatus == 0} ? 'display: none;' : ''"><i class="fa fa-pencil"></i>下架</a>
											</td>
											<td>
												<a href="javascript:;" class="btn btn-info btn-xs hide" permission-rel="/shop/updatePage" th:onclick="'list.update(' + ${entity.id} + ')'"><i class="fa fa-pencil"></i> 编辑 </a> 
												<a href="javascript:;" class="btn btn-primary btn-xs hide" permission-rel="/shop/detail" th:onclick="'list.detail(' + ${entity.id} + ')'"><i class="fa fa-folder"></i> 详情 </a>
											</td>
										</tr>

									</tbody>
								</table>

							</div>
						</div>
						<div class="x_title">
							<div class="clearfix"></div>
						</div>
						<div class="x_content"></div>
					</div>
				</div>
				<div th:replace="fragments/page :: page"></div>
			</div>

			<!-- footer content -->
			<div th:replace="fragments/footer :: footer"></div>
		</div>
	</div>

	<div th:replace="fragments/dependency :: list-js"></div>

	<script src="/dic/area.js"></script>

	<script type="text/javascript" th:inline="javascript">
		function onlineShop(shopId) {
			adminLayer.confirm({title:'警告',content:'确定开启吗？',yes:function(){
				$.post('/shop/onlineShop', {id: shopId}, function(data) {
					if(data) {
						$('#onlineStatus' + shopId).find('.online').hide()
						$('#onlineStatus' + shopId).find('.offline').show()
					}
				})
			}})
		}

		function offlineShop(shopId) {
			adminLayer.confirm({title:'警告',content:'确定关闭吗？',yes:function(){
				$.post('/shop/offlineShop', {id: shopId}, function(data) {
					if(data) {
						$('#onlineStatus' + shopId).find('.offline').hide()
						$('#onlineStatus' + shopId).find('.online').show()
					}
				})
			}})
		}

		$("#restQuery").click(function (){
		    $("#createTypeOptions").val("");
		    $("#cityOptions").val("");
		    $("#businessAreaOptions").val("");
		    $("#rentTypeOptions").val("");
		    $("#shopTypeOptions").val("");
		    $("#onlineStatusOptions").val("");
		    $("input[name='name']").val("");
		    $("input[name='shopNumber']").val("");
		    $("input[name='beginTime']").val("");
		    $("input[name='endTime']").val("");

        });

		$(function() {
			var areaParam = [[${param.area}]]
			var cityParam = 36
			renderCityOptions('cityOptions',cityParam)
			if(cityParam>0){
				renderAreaOptions('areaOptions',areaParam,cityParam)
			}else{
				$("#areaOptions").append('<option value="">请选择</option>')
			}
			$("#cityOptions").change(function(){
				var cityId = $("#cityOptions").val();
				$("#areaOptions").empty();
				if(cityId==''){
					$("#areaOptions").append('<option value="">请选择</option>')
				}else{
					renderAreaOptions('areaOptions',areaParam,cityId)
				}
			})
			var createTypeParam = [[${param.createType}]]
			if (createTypeParam) {
				$('#createTypeOptions').val(createTypeParam)
			}
			var rentTypeParam = [[${param.rentType}]]
			if (rentTypeParam) {
				$('#rentTypeOptions').val(rentTypeParam)
			}
			
			var shopTypeParam = [[${param.shopType}]]
			if (shopTypeParam) {
				$('#shopTypeOptions').val(shopTypeParam)
			}
			var shopBusinessTypeParam = [[${param.shopBusinessType}]]
			if (shopBusinessTypeParam) {
				$('#shopBusinessTypeOptions').val(shopBusinessTypeParam)
			}
			var createTypeParam = [[${param.createType}]]
			if (createTypeParam) {
				$('#createTypeOptions').val(createTypeParam)
			}
			var onlineStatusParam = [[${param.onlineStatus}]]
			if (onlineStatusParam != null) {
				$('#onlineStatusOptions').val(onlineStatusParam)
			}
		})
	</script>

	<script type="text/javascript">
	var list = {
		baseUrl:"shop",
		area:['84%','90%'],
		init : function() {
			$('button[name=add]').bind('click',list.add);
			$('button[name=query]').bind('click',function(){
				window.location.href=list.query();
			});
		},
		detail:function(id){
			adminLayer.ifream({title:'查看',content:'/'+list.baseUrl+'/detail/?id='+id,area:list.area});
		},
		add:function(){
			adminLayer.ifream({title:'添加',content:'/'+list.baseUrl+'/addPage/',area:list.area});
		},
		update:function(id){
			adminLayer.ifream({title:'编辑',content:'/'+list.baseUrl+'/updatePage/?id='+id+'&readonly=n',area:list.area});
		},
		query : function() {
			pageFoot.searchUrl = '/'+list.baseUrl+'/list';
			var createType = $("select[name=createType]").val();
			var area = $("select[name=area]").val();
			var businessArea = $("select[name=businessArea]").val();
			var rentType = $("select[name=rentType]").val();
			var shopType = $("select[name=shopType]").val();
			var parentManageType = $("select[name=parentManageType]").val();
			var sonManageType = $("select[name=sonManageType]").val();
			var onlineStatus = $("select[name=onlineStatus]").val();
			var name = $("input[name=name]").val();
			var shopNumber = $("input[name=shopNumber]").val();
			var beginTime = $("input[name=beginTime]").val();
			var endTime = $("input[name=endTime]").val();
			return pageFoot.addParam("createType", createType).addParam("area", area).addParam("businessArea", businessArea)
				.addParam("rentType", rentType).addParam("shopType", shopType).addParam("parentManageType", parentManageType).addParam("sonManageType", sonManageType).addParam("onlineStatus", onlineStatus)
				.addParam("name", name).addParam("shopNumber", shopNumber).addParam("beginTime", beginTime).addParam("endTime", endTime).searchUrl;
		}
	}
	pageFoot.getCurrentUrl = function() {
		return list.query();
	}
	pageFoot.init();
	list.init();
	//开始时间控件初始化
	$('#myDatepicker0').datetimepicker({
		ignoreReadonly : true,
		allowInputToggle : true,
		format : 'YYYY/MM/DD'
	});
	//结束时间控件初始化
	$('#myDatepicker1').datetimepicker({
		ignoreReadonly : true,
		allowInputToggle : true,
		format : 'YYYY/MM/DD'
	});
	
	if('[[${param.area}]]') {
		$.getJSON('/businessArea/getByAreaId?area=' + '[[${param.area}]]', function(data) {
			var option = '<option value>请选择</option>';
			if(data.length > 0) {
				$.each(data, function(index, temp) {
					option += "<option value='" + temp.id + "'>" + temp.name + "</option>"
				});
			}
			$("select[name=businessArea]").html(option);
			if('[[${param.businessArea}]]') {
				$("select[name=businessArea]").val('[[${param.businessArea}]]');
			}
		});
	}

	$("select[name='area']").change(function() {
		var area = $(this).val();
		if($(this).val()) {
			$.getJSON('/businessArea/getByAreaId?area=' + area, function(data) {
				var option = '<option value>请选择</option>';
				if(data.length > 0) {
					$.each(data, function(index, temp) {
						option += "<option value='" + temp.id + "'>" + temp.name + "</option>"
					});
				}
				$("select[name=businessArea]").html(option);
			});
		} else {
			$("select[name=businessArea]").html('<option value>请选择</option>');
		}
	});
	
	$.getJSON('/shopBusinessType/findParent', function(data) {
		var option = '<option value>请选择</option>';
		if(data.length > 0) {
			$.each(data, function(index, temp) {
				option += "<option value='" + temp.id + "'>" + temp.name + "</option>"
			});
		}
		$("select[name=parentManageType]").html(option);
		if('[[${param.parentManageType}]]') {
			$("select[name=parentManageType]").val('[[${param.parentManageType}]]');
		}
	});
	
	if('[[${param.parentManageType}]]') {
		$.getJSON('/shopBusinessType/findSon?pid=' + '[[${param.parentManageType}]]', function(data) {
			var option = '<option value>请选择</option>';
			if(data.length > 0) {
				$.each(data, function(index, temp) {
					option += "<option value='" + temp.id + "'>" + temp.name + "</option>"
				});
			}
			$("select[name=sonManageType]").html(option);
			if('[[${param.sonManageType}]]') {
				$("select[name=sonManageType]").val('[[${param.sonManageType}]]');
			}
		});
	}
	
	$("select[name='parentManageType']").change(function() {
		var pid = $(this).val();
		if($(this).val()) {
			$.getJSON('/shopBusinessType/findSon?pid=' + pid, function(data) {
				var option = '<option value>请选择</option>';
				if(data.length > 0) {
					$.each(data, function(index, temp) {
						option += "<option value='" + temp.id + "'>" + temp.name + "</option>"
					});
				}
				$("select[name=sonManageType]").html(option);
			});
		} else {
			$("select[name=sonManageType]").html('<option value>请选择</option>');
		}
	});
</script>
</body>
</html>
